import { useState, useCallback, useEffect } from 'react'
import Button from './Button'

function App() {
  const [count1, setCount1] = useState(0)
  const [count2, setCount2] = useState(0)
  const [count3, setCount3] = useState(0)

  const handleClickButton1 = () => {
    // console.log('////');
    setCount1(count1 + 1)
  }
  // useCallback hooks函数
  // 返回值是真正的传给子组件的函数
  const handleClickButton2 = useCallback(() => {
    setCount2(count2 + 1)
  }, [count2])

  useEffect(() => {
    setTimeout(() => {
      setCount2(count2 + 1)
    }, 1200)
  }, [])
  return (
    <div className="App">
      <div>
        <Button onClickButton={handleClickButton1}>Button1</Button>
      </div>
      <div>
        <Button onClickButton={handleClickButton2}>Button2</Button>
      </div>
      <div>
        <Button onClickButton={() => {
          setCount3(count3 + 1)
        }}>Button3</Button>
      </div>
    </div>
  )
}

export default App
